<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!-- 指定文档使用UTF-8字符编码 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口，以适应不同设备屏幕大小 -->
    <title>Beating Heart</title> <!-- 文档标题 -->
    <style>
        /* 样式表定义 */
        body {
            background-color: black; /* 设置页面背景颜色为黑色 */
            margin: 0; /* 去除页面默认边距 */
            overflow: hidden; /* 隐藏超出画布的内容 */
        }
        canvas {
            display: block; /* 将画布作为块级元素显示 */
            margin: auto; /* 使画布在页面中居中 */
        }
        .text {
            position: absolute; /* 将文本绝对定位 */
            top: 50%; /* 使文本距离页面顶部50% */
            left: 50%; /* 使文本距离页面左侧50% */
            transform: translate(-50%, -50%); /* 将文本向左、向上平移自身宽度和高度的一半，实现在页面中居中 */
            color: #FF69B4; /* 设置文本颜色为浅粉色 */
            font-family: '宋体'; /* 设置文本字体为宋体 */
            font-size: 18px; /* 设置文本大小为18像素 */
            text-align: center; /* 使文本内容居中 */
        }
    </style>
</head>
<body>
    <!-- 页面内容定义 -->
    <canvas id="heartCanvas" width="640" height="480"></canvas> <!-- 创建一个宽640像素、高480像素的画布，并设置其ID为heartCanvas -->
    <div class="text" style="top: 5%;">点燃我 温暖你</div> <!-- 创建一个文本元素，内容为“点燃我 温暖你”，并设置其样式类为text，距离页面顶部5% -->
    <script src="heart.js"></script> <!-- 引入heart.js脚本文件 -->
</body>
</html>